<template>
  <div>
    <CustomDialog
      title="新增/编辑土地"
      width="900px"
      :visible.sync="isShowDialog"
      @closed="handleCloseDialog"
    >
      <el-form
        ref="ruleForm"
        v-loading="loading"
        :model="form"
        :rules="rules"
        label-position="left"
        hide-required-asterisk
      >
        <div class="h1 mt-0">基本信息</div>
        <!-- 土地标题 -->
        <el-form-item label="" prop="name" class="row-all">
          <template #label>
            <div class="form-label required">土地标题</div>
          </template>
          <el-input
            v-model="form.name"
            placeholder="20字以内文字描述，如：50亩工业用地出售 | 一手净地、交通便利 ！"
          ></el-input>
        </el-form-item>
        <!-- 土地面积 -->
        <el-form-item label="" prop="area" class="row-left">
          <template #label>
            <div class="form-label required">土地面积</div>
          </template>
          <el-input v-model="form.area" type="number" placeholder="请输入">
            <div slot="suffix" class="pr-2 text-[#444450]">亩</div>
          </el-input>
        </el-form-item>
        <!-- 土地价格 -->
        <el-form-item label="" prop="price" class="row-right">
          <template #label>
            <div class="">土地价格</div>
          </template>
          <el-input v-model="form.price" type="number" placeholder="请输入">
            <div slot="suffix" class="pr-2 text-[#444450]">万元/亩</div>
          </el-input>
        </el-form-item>
        <!-- 土地年限 -->
        <el-form-item label="" prop="yearLimit" class="row-left">
          <template #label>
            <div class="form-label required">土地年限</div>
          </template>
          <el-input v-model="form.yearLimit" type="number" placeholder="请输入">
            <div slot="suffix" class="pr-2 text-[#444450]">年</div>
          </el-input>
        </el-form-item>
        <!-- 土地类型 -->
        <el-form-item label="" prop="type" class="row-right">
          <template #label>
            <div class="required">土地类型</div>
          </template>
          <el-select v-model="form.type" class="w-full">
            <el-option
              v-for="item in landTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 容积率 -->
        <el-form-item prop="plotRatio" class="row-left">
          <template #label>
            <div class="">容积率</div>
          </template>
          <el-input v-model="form.plotRatio" type="number" placeholder="请输入" />
        </el-form-item>
        <!-- 出让形式 -->
        <el-form-item prop="sellType" class="row-right">
          <template #label>
            <div class="required">出让形式</div>
          </template>
          <el-select v-model="form.sellType" class="w-full">
            <el-option
              v-for="item in sellTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 土地标签 -->
        <el-form-item prop="tags" class="row-all">
          <template #label>
            <div class="">土地标签</div>
          </template>
          <el-select
            v-model="form.tags"
            class="w-full"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="可选择或自定义标签"
          >
            <el-option
              v-for="item in landTagOptions"
              :key="item.value"
              :label="item.label"
              :value="item.label"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 土地地址 -->
        <el-form-item label="" prop="addrs" class="row-left">
          <template #label>
            <div class="">土地地址</div>
          </template>
          <el-input v-model="form.addrs" readonly placeholder="点击右侧按钮在地图上选点">
            <i
              slot="suffix"
              class="el-icon-location-outline text-2xl pr-1 pt-[4px] cursor-pointer"
              @click="isShowMap = true"
            />
          </el-input>
        </el-form-item>
        <!-- 土地范围线 -->
        <el-form-item label="" prop="scopeLine" class="row-right">
          <template #label>
            <div class="">土地范围线</div>
          </template>
          <FileUpload :file-list.sync="form.scopeLine" />
        </el-form-item>
        <!-- 土地介绍 -->
        <el-form-item label="" prop="desc" class="row-all">
          <template #label>
            <div>土地介绍</div>
          </template>
          <el-input
            v-model="form.desc"
            type="textarea"
            :rows="3"
            maxlength="300"
            show-word-limit
            placeholder="300字以内文字描述"
          ></el-input>
        </el-form-item>
        <!-- 多媒体资料 -->
        <div class="h1">多媒体资料</div>
        <!-- 图片 -->
        <el-form-item label="" prop="imgList" class="row-all">
          <template #label>
            <div>图片</div>
          </template>
          <CustomUpload :img-list.sync="form.imgList" />
        </el-form-item>
        <!-- 视频 -->
        <el-form-item label="" prop="videoList" class="row-all">
          <template #label>
            <div>视频</div>
          </template>
          <VideoUpload :img-list.sync="form.videoList" />
        </el-form-item>
        <!-- VR全景 -->
        <el-form-item label="" prop="vrLink" class="row-all">
          <template #label>
            <div>VR全景</div>
          </template>
          <el-input v-model="form.vrLink" placeholder="粘贴全景链接"></el-input>
        </el-form-item>
        <!-- 基础设施 -->
        <div class="h1">基础设施</div>
        <el-form-item label="" prop="infrastructure" class="row-all">
          <template #label>
            <div class="h-[20px]">&nbsp;</div>
          </template>
          <Infrastructure :data-list.sync="form.infrastructure" />
        </el-form-item>
        <!-- 招商需求 -->
        <div class="h1">招商需求</div>
        <!-- 税收要求 -->
        <el-form-item label="" prop="taxRequirements" class="row-left">
          <template #label>
            <div class="">税收要求</div>
          </template>
          <el-input v-model="form.taxRequirements" placeholder="请输入">
            <div slot="suffix" class="pr-2 text-[#444450]">万元/亩</div>
          </el-input>
        </el-form-item>
        <!-- 投资强度 -->
        <el-form-item label="" prop="investmentIntensity" class="row-right">
          <template #label>
            <div class="">投资强度</div>
          </template>
          <el-input v-model="form.investmentIntensity" placeholder="请输入">
            <div slot="suffix" class="pr-2 text-[#444450]">万元/亩</div>
          </el-input>
        </el-form-item>
        <!-- 意向产业 -->
        <el-form-item label="" prop="intendedIndustry" class="row-all">
          <template #label>
            <div class="form-label">意向产业</div>
          </template>
          <el-cascader
            id="industry"
            ref="industry"
            v-model="form.intendedIndustry"
            class="w-full"
            clearable
            filterable
            placeholder="招商意向产业，支持模糊搜索、选择"
            :options="industryTree"
            :props="{
              checkStrictly: true,
              multiple: true,
              value: 'code',
              label: 'name',
            }"
            @change="handleIndustryChange"
          ></el-cascader>
        </el-form-item>
        <!-- 联系人 -->
        <div class="h1">联系方式</div>
        <el-form-item label="" prop="contacts" class="row-all">
          <template #label>
            <div>联系人</div>
          </template>

          <div class="flex space-x-2 mb-2">
            <el-input v-model="form.contacts[0].name" placeholder="请输入" class="w-4/12" />
            <el-input v-model="form.contacts[0].phone" class="w-5/12" placeholder="输入联系方式" />
            <el-button type="text" @click="handleAddContacts">+新增联系人</el-button>
          </div>

          <div
            v-for="(item, index) in form.contacts.slice(1)"
            :key="index"
            class="flex space-x-2 mb-2"
          >
            <el-input v-model="item.name" placeholder="请输入" class="w-4/12" />
            <el-input v-model="item.phone" class="w-5/12" placeholder="输入联系方式" />
            <i
              class="el-icon-remove-outline text-xl cursor-pointer flex items-center"
              @click="handleDelContacts(index)"
            ></i>
          </div>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button class="rounded-content-wrap" @click="isShowDialog = false">取 消</el-button>
        <el-button type="primary" class="rounded-content-wrap" @click="handleOk">确 定</el-button>
      </span>
    </CustomDialog>

    <PositionPicker
      :visible.sync="isShowMap"
      :position.sync="form.position"
      :addrs.sync="form.addrs"
    />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import CustomUpload from '../common/CustomUpload/index.vue'
import VideoUpload from '../common/CustomUpload/videoUpload.vue'
import Infrastructure from '../common/Infrastructure/index.vue'
import CustomDialog from '../common/CustomDialog/index.vue'
import PositionPicker from '../common/CustomAMap/PositionPicker.vue'
import FileUpload from '../common/CustomUpload/fileUpload.vue'
import { landTypeOptions, sellTypeOptions, landTagOptions } from '../common/dictionary'
import addEditMixin from '../common/addEditMixin'

const selectKey = [
  { key: 'type', options: 'landTypeOptions' },
  { key: 'sellType', options: 'sellTypeOptions' },
]
export default Vue.extend({
  components: {
    CustomUpload,
    Infrastructure,
    CustomDialog,
    PositionPicker,
    FileUpload,
    VideoUpload,
  },
  mixins: [addEditMixin({ selectKey, templateName: 'B_CONSOLE_LAND' })],
  data() {
    return {
      form: {
        name: '',
        area: null,
        price: null,
        yearLimit: null,
        type: '',
        typeLabel: '',
        plotRatio: '',
        sellType: '',
        sellTypeLabel: '',
        tags: [],
        position: '',
        addrs: '',
        desc: '',
        imgList: [],
        videoList: [],
        vrLink: '',
        infrastructure: [],
        taxRequirements: null,
        investmentIntensity: null,
        intendedIndustry: [],
        contacts: [{ name: '', phone: '' }],
        scopeLine: [],
      },
      rules: {
        name: [
          { required: true, message: '请输入土地标题', trigger: 'blur' },
          { min: 3, max: 20, message: '长度为3~20个字符', trigger: 'blur' },
        ],
        area: [{ required: true, message: '请输入土地面积', trigger: 'blur' }],
        yearLimit: [{ required: true, message: '请输入土地年限', trigger: 'blur' }],
        type: [{ required: true, message: '请选择土地类型', trigger: 'change' }],
        sellType: [{ required: true, message: '请选择出让形式', trigger: 'change' }],
      },
      landTypeOptions,
      sellTypeOptions,
      landTagOptions,
    }
  },
})
</script>
<style lang="scss" scoped>
@import '@/assets/scss/form.scss';
</style>
